<template>
	<view class="container">
		<!-- 功能模块容器 -->
		<view class="card-container">
			<!-- 医学研究和治疗 -->
			<view class="card-item blue" @click="navigateTo('yiXueYanJiuHeZhiLiao')">
				<image class="card-bg" src="https://aw2025ht.kangye.xyz/api/profile/upload/yxyjhzl.jpg" mode="aspectFill" />
			</view>

			<!-- 药物制备 -->
			<view class="card-item green" @click="navigateTo('yaoWuZhiBei')">
				<image class="card-bg" src="https://aw2025ht.kangye.xyz/api/profile/upload/ywzb.jpg" mode="aspectFill" />
			</view>

			<!-- 生物材料 -->
			<view class="card-item purple" @click="navigateTo('shengWuCaiLiao')">
				<image class="card-bg" src="https://aw2025ht.kangye.xyz/api/profile/upload/swcl.jpg" mode="aspectFill" />
			</view>
		</view>
	</view>
</template>

<script setup>
	const navigateTo = (type) => {
		// 这里添加跳转逻辑
		uni.navigateTo({
			url: `/packagenew/pages/${type}/${type}`
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		min-height: 100vh;
		background: #f5f7fb;
	}

	.card-container .card-item .card-bg.data-v-667dc042 {
		width: 111%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.card-container {
		display: flex;
		flex-direction: column;
		gap: 40rpx;

		.card-item {
			border-radius: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			overflow: hidden;
			transition: transform 0.3s ease;
			width: 100%;

			&:active {
				transform: scale(0.98);
			}

			.card-bg {
				width: 112%;
				height: 100%;
				object-fit: cover;
			}

			&.blue {
				background: linear-gradient(135deg, #409eff, #3375e6);
				height: 240rpx;
			}

			&.green {
				background: linear-gradient(135deg, #65d45999, #23a51c);
				height: 240rpx;
			}

			&.purple {
				background: linear-gradient(135deg, #cfb0e0, #9b22af);
				height: 240rpx;
			}
		}
	}
</style>